<template>
  <el-form :inline="true" class="search-form">
    <el-form-item label="搜索内容">
      <el-input clearable v-model.trim="searchCond.keyword" placeholder="用户名、店铺名、菜品名"
        @keyup.enter.native="clickQuery"></el-input>
    </el-form-item>

    <el-form-item label="区域">
      <el-select v-model="searchCond.storeId" placeholder="区域" filterable clearable>
        <el-option v-for="item in storeList" :key="item.storeId" :label="item.storeName" :value="item.storeId" />
      </el-select>
    </el-form-item>

    <el-form-item label="站点">
      <el-select v-model="searchCond.storeId" placeholder="站点" filterable clearable>
        <el-option v-for="item in storeList" :key="item.storeId" :label="item.storeName" :value="item.storeId" />
      </el-select>
    </el-form-item>

    <el-form-item label="店铺">
      <el-select v-model="searchCond.storeId" placeholder="店铺" filterable clearable>
        <el-option v-for="item in storeList" :key="item.storeId" :label="item.storeName" :value="item.storeId" />
      </el-select>
    </el-form-item>

    <el-form-item label="下单时间" class="orderFood-datePickerBox">
      <el-date-picker type="datetime" v-model="searchCond.startTime" format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm" />
      <div class="split-line" style="width: 8px;display: inline;margin:0 5px"></div>
      <el-date-picker type="datetime" v-model="searchCond.endTime" format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm" />
    </el-form-item>

    <div class='search-btn-block'>
      <hz-button type="primary" @click="clickQuery">查询</hz-button>
      <hz-button type="primary" @click="clickReset">重置</hz-button>
    </div>
  </el-form>
</template>
<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

const props = defineProps({
  type: {
    type: String,
    default: "",
  },
  storeList: { type: Array },
});
const emits = defineEmits(["clickQuery", 'clickAdd']);

// 搜素条件
const searchCond = reactive({
  keyword: "",
  storeId: "",
  startTime: "",
  endTime: "",
});
initDateTime();
// initSelectData();

/* ---------methods--------- */

// 初始化搜索条件
function initSelectData() {
  proxy.$http.get('/jx/jxOrderManage/queryRegionSiteStoreRelations').then(res => {
    if (res.code == 200) {
      consolelog(res);
    }
  })
}

// 默认初始时间为前天19:00，到当天的12:00
function initDateTime() {
  let now = new Date();
  let startTime = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
  searchCond.startTime = proxy.$util.formatDate(startTime, 'yyyy-MM-dd') + ' 19:00'
  searchCond.endTime = proxy.$util.formatDate(now, 'yyyy-MM-dd') + ' 12:00'
}

// 查询
function clickQuery() {
  emits('clickQuery', { ...searchCond })
}

// 重置
function clickReset() {
  Object.keys(searchCond).forEach(key => {
    searchCond[key] = '';
  })
  initDateTime();
}

// 新增
function clickAdd() {
  emits('clickAdd')
}

// 获取查询参数
function getSearchCond() {
  return { ...searchCond }
}

// 对外暴露数据
defineExpose({
  getSearchCond: getSearchCond,
  clickQuery: clickQuery,
});
</script>

<style lang="scss">
.search-form.el-form .el-form-item.orderFood-datePickerBox  {
  width: auto;
  .el-form-item__content {
    width: 418px;
    flex-wrap: nowrap;
  }
}

</style>
